<script setup lang="ts">
import { shallowRef, ref, onMounted, watch, nextTick } from 'vue';
import * as echarts from 'echarts/core';
import { TooltipComponent } from 'echarts/components';
import type { TooltipComponentOption } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import type { PieSeriesOption } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

const props = defineProps<{
  seg4Data: any[] | undefined;
  seg4Checked: string;
}>();

echarts.use([TooltipComponent, PieChart, CanvasRenderer, LabelLayout]);

type EChartsOption = echarts.ComposeOption<TooltipComponentOption | PieSeriesOption>;

const mainRef = shallowRef();
const myChart = ref();

const data: any = ref([
  {
    value: 0,
    name: '已赠送总量',
    itemStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#28D1FE', // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#4376FF', // 100% 处的颜色
          },
        ],
      },
    },
  },
  {
    value: 0,
    name: '待领取总量',
    itemStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#FF8A62', // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#FF2B28', // 100% 处的颜色
          },
        ],
      },
    },
  },
  {
    value: 0,
    name: '已领取总量',
    itemStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#FFDB51', // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#FFB400', // 100% 处的颜色
          },
        ],
      },
    },
  },
]);

const option = ref<EChartsOption>({
  tooltip: {
    trigger: 'item',
  },
  series: [
    {
      name: '赋能商城总量',
      type: 'pie',
      radius: ['67%', '90%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center',
      },
      emphasis: {
        label: {
          show: false,
        },
      },
      labelLine: {
        show: false,
      },
      data: data.value,
    },
  ],
});

const getValue = (obj: Object | undefined): [key: string, value: string | number] => {
  if (!obj) {
    return ['-', '-'];
  }
  return Object.entries(obj)[0];
};

watch(
  [() => props.seg4Data, () => props.seg4Checked],
  () => {
    if (props.seg4Data?.length) {
      props.seg4Data.forEach((e) => {
        const [key, value] = getValue(e);
        // @ts-ignore
        const fd = data.value.find?.((v) => v.name === key);
        if (fd) {
          fd.value = value;
        }
        // @ts-ignore
        option.value.series[0].data =
          props.seg4Checked === '累计' ? data.value : data.value.filter((v: any) => v.name !== '待领取总量');
      });
      nextTick(() => {
        myChart.value.setOption(option.value);
      });
    }
  },
  {
    immediate: true,
  }
);

onMounted(() => {
  myChart.value = echarts.init(mainRef.value);
  option.value && myChart.value.setOption(option.value);
});

defineExpose({
  hideTip() {
    myChart.value.dispatchAction({
      type: 'hideTip',
    });
    myChart.value.dispatchAction({
      type: 'downplay',
    });
  },
});
</script>
<template>
  <div class="energizeEchart" @click.stop="() => {}">
    <div class="main" ref="mainRef"></div>
    <div class="center">
      <span>99.80%</span>
      <span class="text-xs text-[#999]">赋能总量</span>
    </div>
  </div>
</template>
<style lang="less" scoped>
.energizeEchart {
  width: 170px;
  height: 170px;
  position: relative;
  .main {
    height: 100%;
  }
  .center {
    position: absolute;
    z-index: 99;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f5f6fc;
    border-radius: 999px;
    width: 56%;
    height: 56%;
  }
}
</style>
